<template>
<div class="execution">
  <basic-container>
    <avue-crud
      ref="crud"
      v-model="form"
      :page.sync="page"
      :data="tableData"
      :permission="permissionList"
      :table-loading="tableLoading"
      :option="tableOption"
      @on-load="getList"
      @search-change="searchChange"
      @refresh-change="refreshChange"
      @size-change="sizeChange"
      @current-change="currentChange"
      @row-click="getRow"
    >
      <template slot-scope="scope" slot="menuLeft">
        <el-button
          type="success"
          icon="el-icon-bell"
          size="small"
          @click="allReader"
          :loading="loadingflag"
          >全部已读</el-button
        >
      </template>
      <template slot-scope="scope" slot="readStatus">
        <span v-if="scope.row.readStatus === '1'" style="
            background-color: #67c23a;
            display: inline-block;
            height: 32px;
            padding: 0 15px;
            line-height: 32px;
            font-size: 12px;
            color: #fff;
            border: 1px solid #67c23a;
            border-radius: 4px;
            box-sizing: border-box;
            white-space: nowrap;">已读消息</span>
            <span v-else style="
            background-color: #f56c6c;
            display: inline-block;
            height: 32px;
            padding: 0 15px;
            line-height: 32px;
            font-size: 12px;
            color: #fff;
            border: 1px solid #f56c6c;
            border-radius: 4px;
            box-sizing: border-box;
            white-space: nowrap;">未读消息</span>
      </template>
    </avue-crud>
    <el-dialog append-to-body title="消息内容" :visible.sync="modal">
      <div>{{diaObj.diclabel}}</div>
      <div style="margin-bottom: 15px;">发布人：{{diaObj.sendUserName}}&nbsp;&nbsp;&nbsp;发布时间：{{diaObj.sendDate}}</div>
      <div style="margin-left: -5px;" v-html="diaObj.msgContent"></div>
    </el-dialog>
    </basic-container>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { tableOption } from "@/const/news/index";
import { getSysmsginner, readsysmsginner, readAll } from "@/api/admin/user";
import { remote } from "@/api/admin/dict";
export default {
  name: "newsList",
  data() {
    return {
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20, // 每页显示多少条
      },
      tableLoading: false,
      tableOption: tableOption,
      tableData: [],
      dicList: [],
      form: {},
      diaObj: {},
      modal: false,
      remak: "",
      loadingflag:false
    };
  },
  created() {
    remote('module_type').then(response => {
      this.dicList = response.data.data
    })
  },
  mounted() {},
  computed: {
    ...mapGetters(["unreadMessage", "permissions"]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permissions.repair_repair_add, false),
        delBtn: this.vaildData(this.permissions.repair_repair_del, false),
        editBtn: this.vaildData(this.permissions.repair_repair_edit, false),
      };
    },
  },
  methods: {
    getList(page, params) {
      this.tableLoading = true;
      getSysmsginner(
        Object.assign(
          {
            current: page.currentPage,
            size: page.pageSize,
          },
          params,
          this.searchForm
        )
      )
        .then((response) => {
          this.tableData = response.data.data.records;
          this.page.total = response.data.data.total;
          this.tableLoading = false;
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    currentChange(current) {
      this.page.currentPage = current;
    },
    searchChange(form, done) {
      this.searchForm = form;
      this.page.currentPage = 1;
      this.getList(this.page, form);
      done();
    },
    refreshChange() {
      this.getList(this.page);
    },
    getRow(row) {
      this.modal = true;
      // this.remak = row.msgContent;
      let dicvaluelist = this.dicList.filter(item => {
        return item.value === row.contentType
      })
      row.diclabel = dicvaluelist[0].label
      this.diaObj = row

      this.readMessage(row.id);
    },
    readMessage(id) {
      readsysmsginner(id).then((res) => {
        this.getList(this.page);
        this.getSysmsginnerNum();
      });
    },
    getSysmsginnerNum() {
      getSysmsginner({ readStatus: 2 }).then((res) => {
        let unreadMessage = res.data.data.total;
        this.$store.commit("SET_MESSAGE", unreadMessage);
      });
    },
    allReader() {
      this.loadingflag=true;
      readAll()
        .then((res) => {
          this.getList(this.page);
          this.getSysmsginnerNum();
          this.$message({
            message: "操作成功!",
            type: "success",
          });
          this.loadingflag=false;
        })
        .catch(() => {
          this.$message({
            message: "操作失败!",
            type: "warning",
          });
          this.loadingflag=false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.code {
  font-size: 12px;
  display: block;
  font-family: monospace;
  white-space: pre;
  margin: 1em 0px;
}
</style>
